<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          基地管理系统
        </div>
        <div class="w2">
          在基地管理系统中你可以查看基地等基本信息，同时还可以管理基地地块，选择地块新增种植信息，提供一套可行的种植信息方案
        </div>
        <div class="w2">
          基地信息系统是种植系统中重要的一环,它可以为我们提供基地的信息，为下一步做准备
        </div>
      </div>
      <img src="../../static/u=2179590687,2836296523&fm=253&fmt=auto&app=138&f=JPEG.webp"
           class="imgDri">
    </div>
    <el-form class="search-form">
      <el-form-item label="基地名称">
        <el-input v-model="searchForm.companyName"
                  clearable
                  style="width:150px" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="searchForm.remark"
                  clearable
                  style="width:150px" />
      </el-form-item>
    </el-form>
    <div class="operations">
      <el-button type="success"
                 @click="load">查询</el-button>
      <el-button type="primary"
                 @click="openForm()">新增</el-button>
    </div>
    <el-table :data="dataList"
              stripe
              style="width: 100%">
      <el-table-column prop="companyName"
                       label="基地名称" />
      <el-table-column prop="companyAddress"
                       :show-overflow-tooltip="true"
                       label="基地地址" />
      <el-table-column prop="companyPhone"
                       :show-overflow-tooltip="true"
                       label="联系电话" />
      <el-table-column prop="companyWebsite"
                       label="企业网站" />
      <el-table-column prop="companyLicense"
                       label="生产资质（许可证）">
        <template #default="scope">
          <img v-if="scope.row.companyLicense"
               style="width:100px;height:80px;object-fit:cover;"
               :src="scope.row.companyLicense">
        </template>
      </el-table-column>
      <el-table-column prop="remark"
                       label="备注" />
      <el-table-column label="操作"
                       width="300">
        <template #default="scope">
          <el-button type="text"
                     style="color:#FFB300"
                     @click="openArea(scope.row)">地块信息</el-button>
          <el-button type="text"
                     @click="openForm(scope.row)">编辑</el-button>
          <el-button type="text"
                     style="color:red"
                     @click="deleteHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next, jumper,total"
                   :total="total"
                   :current-page="pageNum"
                   style="margin-top:15px;"
                   @size-change="pageSizeChange"
                   @current-change="pageChange" />
    <Form ref="form"
          @refresh="load" />
    <Area ref="area"
          @refresh="load" />
  </div>
</template>

<script>
import { getCompanyPage, deleteCompanyById } from '@/api/plant/company'
import Area from "./components/area.vue"
import Form from './components/form.vue'
export default {
  components: { Form, Area },
  data () {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        companyName: '',
        remark: ''
      },
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getCompanyPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }, {
        companyName: this.searchForm.companyName,
        remark: this.searchForm.remark
      })
      console.log(data)
      this.dataList = data.data.records
      this.total = data.data.total
    },
    pageChange (page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange (size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange (rows) {
      this.seleteList = rows
    },
    openForm (company) {
      this.$refs.form.init(company)
    },
    deleteHandle (id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteCompanyById, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteCompanyBatch, ids)
        }
      })
        .catch(() => { })
    },
    delete (operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    },
    openArea (company) {
      this.$refs.area.init(company)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 350px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;

  .w1 {
    height: 80px;
    font-size: 25px;
    font-weight: 350;
  }

  .w2 {
    height: 50px;
    font-size: 15px;
    font-weight: 250;
  }
}

.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.arrow {
  cursor: pointer;
}

.arrow:hover {
  color: #409eff;
}
.operations {
  padding: 0 10px;
}
</style>
